<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Album Details</title>

	<script src="lib/jquery-2.1.4.min.js"></script>
    
    <link rel="stylesheet" href="lib/bootstrap-3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/bootstrap-3.3.5/css/bootstrap-theme.min.css">    
    <script src="lib/bootstrap-3.3.5/js/bootstrap.min.js"></script>


<script>

$.urlParam = function(name){
	var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
	return results[1] || 0;
}

$(document).ready(function() {
	var albumId = $.urlParam('albumId');
    $.ajax({
        type: 'GET',
        url: 'GetAlbumDetail?albumId=' + albumId,
        contentType: "application/json",
        success: function(json) {
        	var result = "<h1>" + json.album.title + "</h1>" +
        	             "<h2>" + json.album.band.name + "</h2>" +
        	             "<ol>"; 
        	for(var song in json.album.songTitles) {
        		result += "<li>" + json.album.songTitles[song] + "</li>";
        	}
        	result += "</ol>";
        	$("#loading").empty();
        	$("#loading").html(result);
        	$("#loading").hide().fadeIn("slow");
        },
        error: function(e) {
          $("#loading").empty();
          raiseError("There was a problem connecting to the server!");
        }
      });
	
});

function raiseError(msg) {
  var errorDiv = '<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><strong>ERROR!</strong> '+msg+'</div>';
  $('#errMsgArea').empty();
  $('#errMsgArea').append(errorDiv);
  $('#errMsgArea').hide().fadeIn("slow");
}
</script>


</head>
<body>
<div id="errMsgArea"></div>
<div id="loading"><img src="img/loading.gif" alt="loading"/></div>

</body>
</html>